<template>
	<view class="float-item fixed-item  layer" :style="layerstyle">
		<vcustomer :linkdata="mydata.link">
			<view open-type="" class="layer isfixed left bottom" :style="'width: ' + mydata.width + 'rpx; margin: 119rpx 46rpx;'">
				<vimage mode="widthFix" lazy-load="" :src="mydata.img" alt="" style="width: 100%; display: block;"></vimage>
			</view>
		</vcustomer>
	</view>
</template>

<script>
import util from '@/common/util.js';
export default {
	props: {
		active: {
			type: Boolean,
			default: false
		},
		mydata: {
			type: Object,
			default: {}
		}
	},
	computed: {
		layerstyle() {
			let position = this.mydata.position;
			let a = '';
			let b = '';
			switch (position) {
				case 'lt':
					a = 'left:';
					b = 'top:';
					break;
				case 'rt':
					a = 'right:';
					b = 'top:';
					break;

				case 'lb':
					a = 'left:';
					b = 'bottom:';
					break;
				case 'rb':
					a = 'right:';
					b = 'bottom:';
					break;
			}
			let show_gap = util.getShowType();
			let h=show_gap?75:50
			return (
				'height:' +
				this.mydata.width +
				'rpx; width: ' +
				this.mydata.width +
				'rpx; margin: 0px ' +
				(this.mydata.deviationb / 2 + 15) * 2 +
				'rpx;' +
				a +
				this.mydata.deviationb +
				'rpx;' +
				b +
				(this.mydata.deviationa / 2 + h) * 2 +
				'rpx;'
			);
		}
	}
};
</script>

<style>
.float-item.layer {
	display: flex;
	align-items: center;
	position: fixed;
	z-index: 2008;
	background-color: transparent;
}
.layer {
	background: none;
}
.float-item.layer .layer {
	position: relative;
	margin: 0 !important;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
}
.float-item.layer.on .del-mask {
	top: -2.5px;
	left: -15px;
	width: calc(100% + 30px);
	height: calc(100% + 5px);
}

.float-item.on .del-mask {
	border: 1px solid #2d8cf0;
	position: absolute;
	display: block;
	background: rgba(255, 255, 255, 0.5);
	-webkit-box-shadow: 0px 1px 14px rgba(133, 148, 162, 0.2);
	box-shadow: 0px 1px 14px rgba(133, 148, 162, 0.2);
}

.float-item .del-mask {
	display: none;
}
.float-item.layer.on .del-mask .del {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}

.float-item.on .del-mask .del {
	top: -1px;
	right: 0;
}

.float-item .del {
	position: absolute;
	width: 40px;
	height: 20px;
	right: 0;
	top: 0;
	background: #ff1f2c;
	border-radius: 0px 0px 2px 2px;
	text-align: center;
	line-height: 18px;
	font-family: PingFang SC;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	color: #fff;
	cursor: pointer;
	z-index: 1000;
}
</style>
